<template>
  <template v-for="(item, index) in menuList" :key="index">
    <!-- 目录菜单 -->
    <el-sub-menu :index="index" v-if="item.children !== null">
      <template #title>
        <svg-icon :name="item.icon"></svg-icon>
        <!-- <component class="icons" :is="item.icon"></component> -->
        <span>{{ item.label }}</span>
      </template>
      <SideMenuItem :menuList="item.children"></SideMenuItem>
    </el-sub-menu>
    <!-- 页面菜单 -->
    <el-menu-item
      :index="item.path"
      :key="item.path"
      @click="ClickMenu(item)"
      v-else
    >
      <svg-icon :name="item.icon"></svg-icon>
      <!-- <component class="icons" :is="item.icon"></component> -->
      <template #title>
        <span>{{ item.label }}</span>
      </template>
    </el-menu-item>
  </template>
</template>
<script setup name="SideMenuItem">
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
let store = useStore();
// 递归组件，在script添加name属性，然后可以在模板中直接使用
const props = defineProps({
  menuList: {
    type: Array,
    default: [],
  },
});
const ClickMenu = (item) => {
  router.push({
    name: item.name,
  });
  // vuex管理面包屑
  store.commit("selectMenu", item);
};
</script>
<style lang="less">
svg-icon {
  width: 18px;
  height: 18px;
  margin-right: 5px;
}
</style>
